<template>
    <div>
      <div class="city_big">
        <div class="div_title">城市选择</div>
        <div class="div_tabs">
          <div class="div_tab" @click="clickTab(index)" :class="{active:item.active}" v-for="(item,index) in tabs" :key="index">
            {{item.name}}
            <span :class="{active:item.active}"></span>
          </div>
        </div>
        <div class="div_content" ref="divContent">
          <li v-for="(item,index) in listArr" @click="handleData(item)" :key="index">{{item.label}}</li>
        </div>
      </div>
    </div>
</template>
<script>
import { queryCityData } from '@/assets/js/service'
export default {
  data() {
    return {
      openSimple:false,
      tabs:[{"code":"0","name":"请选择","parentId":"0","active":false}],
      defaultObj:{"code":"0","name":"请选择","parentId":"0","active":true},
      listArr:[],
      dataTree:[],
      tempList:[],
      initType:0,//0为全量初始化 1为层级初始化
      allIndexList:[]//总体缓存数据list 根据下标存储
    };
  },
  props: ["queryObj"],
  methods: {
    initData(treeData,initType){
      let _this=this;
      //console.log(treeData)
      _this.dataTree=treeData;
      _this.allIndexList=[];
      _this.initType=initType;
      if(treeData){
        _this.setListArr(_this.dataTree)
      }
    },
    clickTab(_index){
      //console.log(_index)
      //console.log(this.tabs.length)
      let templist=this.allIndexList[_index];
      this.allIndexList.splice(_index,this.tabs.length-_index);
      this.tabs.splice(_index,this.tabs.length-_index);
      this.tabs.push(this.defaultObj);
      this.setListArr(templist)
      //console.log(this.allIndexList[_index])
      //arr.splice(1,1)
    },
    setListArr(_list){
      let _this=this;
      _this.listArr=[];
      _this.tempList=[];
      _this.allIndexList.push(_list);
      _list.forEach((item,index)=>{
        let obj={"id":item.id,"label":item.label,"parentId":item.parentId}
        _this.listArr.push(obj);
      })
      _this.$refs.divContent.scrollTop=0;//保证每次滚动条都在最顶部
      _this.tempList=_list;
    },
    handleData(_item){
      let _this=this;
      console.log(_item)
      _this.queryHandle(_item);
    },
    queryHandle(_item){
      let _this=this;
      _this.tempList.forEach((item,index)=>{
        if(item.id==_item.id){
          //console.log(item.children)
          let childrens=item.children;
          if(_this.initType==1){
             queryCityData({"parentCode":item.id},function(res){
                  //console.log("res= queryCityData= parentCode==>"+item.id,res)
                  if(typeof(res.data)!="undefined"){
                      let obj={"code":_item.id,"name":_item.label,"parentId":_item.parentId,"active":false}
                      _this.tabs.pop();//删除最后一列数据
                      _this.tabs.push(obj);//添加点击的OBJ
                      childrens=res.data;
                      _this.handleList(childrens)
                  }
              })
          }else{
               let obj={"code":_item.id,"name":_item.label,"parentId":_item.parentId,"active":false}
              _this.tabs.pop();//删除最后一列数据
              _this.tabs.push(obj);//添加点击的OBJ
              _this.handleList(childrens)
          }
         
          
        }
      });
    },
    handleList(childrens){
      let _this=this;
      if(childrens&&childrens.length>0){
          _this.setListArr(childrens);
          _this.tabs.push(_this.defaultObj);//添加默认请选择tabs
        }else{
          console.log("no more anthing else data")
          _this.$emit("setCityObj",_this.tabs)
      }
    },
    setDefault(_array,setType){
      let _this=this;
      if(_array&&_array.length>0){
        _array.forEach((item,index)=>{
          if(index>0){
            setTimeout(()=>{
              _this.tempList.forEach((itemch,indexch)=>{
                if(setType==1){
                  if(item==itemch.id){
                    _this.handleData(itemch);
                  }
                }else{
                  if(item==itemch.label){
                    _this.handleData(itemch);
                  }
                }
              })
            },parseInt(index*2+"00"))
          }else{
            _this.tempList.forEach((itemch,indexch)=>{
              if(setType==1){
                if(item==itemch.id){
                  _this.handleData(itemch);
                }
              }else{
                if(item==itemch.label){
                  _this.handleData(itemch);
                }
              }
            })
          }
          
        })
      }
    },
    filterArray(data, id) {//组织机构的递归
        var fa = function (parentid) {
            var _array = [];
            for (var i = 0; i < data.length; i++) {
                var n = data[i];
                if (n.parentcode === parentid) {
                    n.children = fa(n.emorgid);
                    _array.push(n);
                }
            }
            return _array;
        }
        return fa(id);
    },
  },mounted:function () {
    let _this=this;
  }
};
</script>
<style lang="less" scoped>
.city_big{
    width: 100%;
    height: 100%;
    background: #fff;
    .div_title{
      width: 100%;
      position: relative;
      height: 30px;
      color: gray;
      text-align: center;
      line-height: 30px;
    }
    .div_tabs{
      width: 100%;
      height: 30px;
      padding: 0px 5%;
      .div_tab{
        height: 30px;
        min-width: 10%;
        line-height: 30px;
        float: left;
        position: relative;
        padding: 1px 8px;
        .active{
          display: block;
          color: #0071B8;
        }
        span{
          width: 80%;
          height: 1px;
          display:none;
          background: #0071B8;
          position: absolute;
          bottom: 1px;
          animation:mymove 2s infinite;
        }
      }
    }
    .div_content{
      width: 100%;
      height: calc( 50vh - 60px );
      overflow: auto;
      padding: 5px 5%;
      li{
       width: 100%;
       height: 30px;
       line-height: 30px;
       padding-left: 5%;
       border-bottom: 1px solid #e5e5e5; 
      }
    }
    
}

</style>
